<template>
	<view class="container">
		<view class="header">
			<image src="../../../static/images/coin.png" mode=""></image>
			<view class="text">可提现余额</view>
			<view class="money">
				<text>4.05</text>元
			</view>
			<view class="tips">
				<text class="iconfont iconbangzhushuoming"></text>
				<text>为什么充值10元，只能提现1元</text>
			</view>
		</view>
		<view class="main">
			<view class="main-tit">
				选择提现金额 <text class="record" @click="handleRecord">提现记录</text>
			</view>
			<view class="moneyBox">
				<view class="boxItem active">
					1元<text>(限首次)</text> 
				</view>
				<view class="boxItem">
					5元
				</view>
				<view class="boxItem">
					10元
				</view>
				<view class="boxItem">
					30元
				</view>
				<view class="boxItem">
					50元
				</view>
				<view class="boxItem">
					100元
				</view>
			</view>
			<view class="lineBox"></view>
			<view class="main-tit">
				提现到
			</view>
			<view class="changeWx">
				<view class="wxstyle">
					<image src="../../../static/images/wx-icon.png" mode=""></image>
					<text>微信零钱</text>
				</view>
				<view class="wxNickname">
					<image src="../../../static/avatar.jpg" mode=""></image>
					<text class="name">
						那一抹芳华
					</text>
				</view>
			</view>
		</view>
		<view class="extractBtn">
			立即提现
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				
			}
		},
		onReady() {},
		methods: {
			handleRecord () {
				uni.navigateTo({
					url:"/pages/center/myWallet/record"
				})
			}
		},
	}
</script>
<style>
	page {
		background: #fafbfd;
	}
</style>
<style scoped lang="scss">
	.container {
		background: #fff;
		.header {
			padding-top: 36rpx;
			text-align: center;
			image {
				display: block;
				margin: 0 auto;
				width: 126rpx;
				height: 126rpx;
				margin-bottom: 32rpx;
			}
			.text {
				margin-bottom: 65rpx;
				line-height: 100%;
				font-size: 24rpx;
				color: #999;
			}
			.money {
				margin-bottom: 62rpx;
				line-height: 44rpx;
				font-size: 24rpx;
				color:#000;
				text {
					font-weight: bold;
					font-size: 44rpx;
				}
			}
			.tips {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: #fff3ea;
				font-size: 24rpx;
				color: #e69867;
				text {
					&:last-child {
						padding-left: 5rpx;
					}
				}
				.iconfont {
					vertical-align: middle;
					color: #fe7642;
					font-size: 48rpx;
				}
			}
		}
		.main {
			.main-tit {
				height: 98rpx;
				padding-left: 30rpx;
				line-height: 98rpx;
				border-bottom: 1px solid #eee;
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
				font-family: PingFangSC-Regular, sans-serif;
				.record {
					float: right;
					margin-right: 30rpx;
					font-weight: normal;
					font-size: 24rpx;
				}
			}
			.moneyBox {
				display: grid;
				padding: 38rpx 30rpx;
				grid-template-columns:208rpx  208rpx  208rpx;
				grid-template-rows: 72rpx 72rpx;
				column-gap: 30rpx;
				row-gap: 32rpx;
				.boxItem {
					line-height: 72rpx;
					border: 1px solid #eee;
					border-radius: 36rpx;
					text-align: center;
					font-size: 24rpx;
					color: #000;
					&.active {
						color: #e40e48;
						border-color: #e40e48;
					}
					text {
						font-size: 20rpx;
					}
				}
			}
			.lineBox {
				width: 100%;
				height: 25rpx;
				background: #f5fbfb;
			}
			.changeWx {
				display: flex;
				-webkit-box-pack: justify;
				-webkit-justify-content: space-between;
				-ms-flex-pack: justify;
				justify-content: space-between;
				align-items: center;
				height: 108rpx;
				padding: 0 30rpx;
				background: #fff;
				.wxstyle {
					image {
						width: 54rpx;
						height: 54rpx;
						vertical-align: middle;
					}
					text {
						padding-left: 20rpx;
						font-size: 26rpx;
						color: #898989;
					}
				}
				.wxNickname {
					image {
						width: 54rpx;
						height: 54rpx;
						border-radius: 50%;
						vertical-align: middle;
					}
					.name {
						padding-left: 20rpx;
						font-size: 26rpx;
						color: #333;
					}
				}
			}
		}
		.extractBtn {
			position: absolute;
			left: 50%;
			bottom: 30rpx;
			transform: translateX(-50%);
			width: 664rpx;
			height: 80rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
			background: linear-gradient(to right, #ff3756, #ee794a);
			font-size: 28rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>
